<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="账单编号" prop="billNo">
        <el-input
          v-model="queryParams.billNo"
          placeholder="请输入账单编号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="老人姓名" prop="elderlyName">
        <el-input
          v-model="queryParams.elderlyName"
          placeholder="请输入老人姓名"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 交易状态筛选和生成账单按钮 -->
     <div class="flex-container">
        <div class="status-buttons">
      <div 
        class="status-btn" 
        :class="{ active: selectedStatus === '' }"
        @click="handleClick('')"
      >
        全部
      </div>
      <div 
        class="status-btn"
        v-for="dict in bill_transaction_status" 
        :key="dict.value"
        :class="{ active: selectedStatus === dict.value }"
        @click="handleClick(dict.value)"
      >
        {{ dict.label }}
      </div>
        </div>
        <div class="generate-btn">
          <el-button type="primary" @click="generateBill">生成月度账单</el-button>
        </div>
     </div>
    

    <!-- 账单列表表格 -->
    <el-table v-loading="loading" :data="accountEntryListList" @selection-change="handleSelectionChange">
      <el-table-column label="序号" align="center"><template #default="scope">
        {{ scope.$index + 1 }}
      </template></el-table-column>
      <el-table-column label="账单编号" align="center" prop="billNo" width="150"/>
      <el-table-column label="账单类型" align="center" prop="billType" />
      <el-table-column label="账单月份" align="center" prop="billMonth" />
      <el-table-column label="老人姓名" align="center" prop="elderly.name" />
      <el-table-column label="老人身份证号" align="center" prop="elderly.idCard" width="180" />
      <el-table-column label="账单金额" align="center" prop="billAmount" />
      <el-table-column label="应付金额" align="center" prop="payableAmount" />
      <el-table-column label="支付截至日期" align="center" prop="paymentDeadline" width="150">
        <template #default="scope">
          <span>{{ parseTime(scope.row.paymentDeadline, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交易状态" align="center" prop="transactionStatus">
        <template #default="scope">
          <dict-tag :options="bill_transaction_status" :value="scope.row.transactionStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column 
        label="操作" 
        align="center" 
        class-name="small-padding fixed-width" 
        fixed="right" 
        width="180"
      >
        <template #default="scope">
          <el-button 
            link 
            type="primary" 
            @click="handlePay(scope.row)" 
            v-hasPermi="['financialManagement:accountEntryList:pay']"
            :disabled="!getButtonStatus(scope.row.billType, scope.row.transactionStatus).payBtnEnabled"
          >
            支付
          </el-button>
          <el-button 
            link 
            type="primary" 
            @click="handleCancel(scope.row)" 
            v-hasPermi="['financialManagement:accountEntryList:cancel']"
            :disabled="!getButtonStatus(scope.row.billType, scope.row.transactionStatus).cancelBtnEnabled"
          >
            取消
          </el-button>
          <el-button 
            link 
            type="primary" 
            @click="handleView(scope.row)" 
            v-hasPermi="['financialManagement:accountEntryList:view']"
            :disabled="!getButtonStatus(scope.row.billType, scope.row.transactionStatus).viewBtnEnabled"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页组件 -->
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 取消/支付凭证弹窗 -->
    <el-dialog :title="title" v-model="openView" width="500px" append-to-body>
      <el-form ref="accountEntryListRef" :model="form" :rules="rules" label-width="80px">
        <!-- 取消原因（仅取消弹窗显示） -->
        <el-form-item label="取消原因" prop="cancelReason" v-if="title === '填写取消原因'">
          <el-input v-model="form.cancelReason" type="textarea" placeholder="请输入取消原因" />
        </el-form-item>
        
        <!-- 支付方式（仅支付弹窗显示） -->
        <el-form-item label="支付方式" prop="paymentMethod" v-if="title === '上传支付凭证'">
          <el-select v-model="form.paymentMethod" placeholder="请选择支付方式">
            <el-option label="微信" value="微信" />
            <el-option label="支付宝" value="支付宝" />
          </el-select>
        </el-form-item>
        
        <!-- 支付凭证图片（仅支付弹窗显示） -->
        <el-form-item 
          label="凭证图片" 
          prop="paymentVoucher"
          v-if="title === '上传支付凭证'"
        >
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :name="uploadName"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-remove="handleRemove"
          >
            <!-- 上传成功后显示图片，否则显示加号图标 -->
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        
        <!-- 支付备注（仅支付弹窗显示） -->
        <el-form-item label="支付备注" prop="paymentRemark" v-if="title === '上传支付凭证'">
          <el-input v-model="form.paymentRemark" type="textarea" placeholder="请输入支付备注" />
        </el-form-item>
      </el-form>
      
      <!-- 预交款余额显示 -->
      <div v-if="title === '上传支付凭证'" style="margin-top: 20px; text-align: left; color: #606266; font-size: 14px;">
        老人预交款余额：¥{{ elderlyDepositBalance }}
      </div>

      <!-- 弹窗底部按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- 生成月度账单弹窗 -->
    <el-dialog :title="title" v-model="openGenerateBill" width="500px" append-to-body>
      <el-form ref="generateBillFormRef" :model="generateBillForm" :rules="generateBillRules" label-width="100px">
        <!-- 老人姓名下拉框 -->
        <el-form-item label="老人姓名" prop="elderlyId">
          <el-select v-model="generateBillForm.elderlyId" placeholder="请选择老人">
            <el-option 
              v-for="elderly in elderlyList" 
              :key="elderly.id" 
              :label="elderly.
elderlyName+'('+elderly.elderlyIdCard+')'"
              :value="elderly.elderlyId
" 
            />
          </el-select>
        </el-form-item>
        
        <!-- 日期选择（年月） -->
        <el-form-item label="账单月份" prop="billMonth">
          <el-date-picker
            v-model="generateBillForm.billMonth"
            type="month"
            placeholder="请选择月份"
            format="YYYY-MM"
            value-format="YYYY-MM"
            :disabled-date="disabledDate"
          />
        </el-form-item>
      </el-form>
      
      <!-- 弹窗底部按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitGenerateBill">确 定</el-button>
          <el-button @click="handleCancelGenerateBill">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AccountEntryList">
import { listAccountEntryList, getAccountEntryList, updateAccountEntryList, addMonthAccountEntryListDetail } from "@/api/financialManagement/accountEntryList"
import { ref, reactive, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { getToken } from '@/utils/auth'  // 若依Token工具
import { useRouter } from 'vue-router'
// 引入入住老人列表方法
import { listRuzhu } from "@/api/rutui/ruzhu"
//引入账单编号生成方法
import {numberGeneration } from "@/utils/numberGeneration"
//引入余额查询方法
import {
  listBalancefind,
  getBalancefind,
  delBalancefind,
  addBalancefind,
  updateBalancefind,
  getBalanceByElderlyId,
  updateBalancefindByElderlyId
} from "@/api/balance/balancefind";
// 路由实例
const router = useRouter()

// 获取组件实例（用于调用proxy）
const { proxy } = getCurrentInstance()
// 交易状态字典
const { bill_transaction_status } = proxy.useDict('bill_transaction_status')

// 上传配置（适配若依后端）
const uploadHeaders = ref({
  Authorization: `Bearer ${getToken()}`  // 携带认证Token
})
const uploadUrl = ref(`${import.meta.env.VITE_APP_BASE_API}/common/upload`)  // 若依通用上传接口
const uploadName = ref('file')  // 若依后端接收文件的参数名
const imageUrl = ref('')  // 图片预览地址（完整路径）

// 页面核心数据
const accountEntryListList = ref([])
const openView = ref(false)  // 弹窗控制
const openGenerateBill = ref(false)  // 生成账单弹窗控制
const loading = ref(true)    // 加载状态
const showSearch = ref(true) // 搜索区域显示控制
const ids = ref([])          // 选中的ID集合
const single = ref(true)     // 单选控制
const multiple = ref(true)   // 多选控制
const total = ref(0)         // 总条数
const title = ref("")        // 弹窗标题
const selectedStatus = ref('')  // 选中的交易状态
const elderlyList = ref([])  // 老人列表
const elderlyDepositBalance = ref(0)  // 老人预交款余额

// 表单数据与验证规则
const data = reactive({
  form: {
    id: null,
    transactionStatus: null,
    cancelReason: null,
    paymentMethod: null,
    paymentVoucher: null,
    paymentRemark: null
  },
  generateBillForm: {
    elderlyId: null,
    billMonth: '',
    billNo: null,
    billType: '月度账单'
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    billNo: null,
    elderlyName: null,
    transactionStatus: null
  },
  rules: {
    paymentMethod: [
      { required: true, message: "请选择支付方式", trigger: "blur" }
    ],
    paymentVoucher: [
      { required: true, message: "请上传支付凭证图片", trigger: ["change", "submit"] }
    ],
    paymentRemark: [
      { required: true, message: "请输入支付备注", trigger: "blur" }
    ],
    cancelReason: [
      { required: true, message: "请输入取消原因", trigger: "blur" }
    ]
  },
  generateBillRules: {
    elderlyId: [
      { required: true, message: "请选择老人", trigger: "blur" }
    ],
    billMonth: [
      { required: true, message: "请选择账单月份", trigger: "blur" }
    ]
  }
})

// 解构响应式数据
const { queryParams, form, rules, generateBillForm, generateBillRules } = toRefs(data)

/** 查询账单列表 */
function getList() {
  loading.value = true
  listAccountEntryList(queryParams.value).then(response => {
    accountEntryListList.value = response.rows
    total.value = response.total
    loading.value = false
    console.log(accountEntryListList.value);
    
  }).catch(() => {
    loading.value = false
  })
}

// 导入用户store获取当前登录用户信息
import useUserStore from "@/store/modules/user";
// 获取用户store实例
const userStore = useUserStore();

//传入老人id,账单类型，当前月份  新增账单
function addMonthBill() {
  // 添加creator参数，使用当前登录用户的id
  // 保持原始的billMonth格式不变，确保后端能正确接收数据
  // 移除billType参数，让系统使用默认的月度账单类型设置
  const billData = {
    ...generateBillForm.value,
    creator: userStore.id
    // 移除billType字段，避免硬编码导致类型不正确
  };
  
  console.log('提交给后端的账单数据:', billData);
  
  addMonthAccountEntryListDetail(billData).then(response => {
    ElMessage.success("新增月费账单成功");
    getList();
    handleCancelGenerateBill();
  }).catch(() => {
    ElMessage.error("新增月费账单失败");
  });
}

/** 表单重置（含图片重置） */
function reset() {
  form.value = {
    id: null,
    transactionStatus: null,
    cancelReason: null,
    paymentMethod: null,
    paymentVoucher: null,
    paymentRemark: null
  }
  imageUrl.value = ''  // 重置图片预览
  if (proxy.$refs.accountEntryListRef) {
    proxy.resetForm("accountEntryListRef")
  }
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

/** 表格选择事件 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}

/** 交易状态筛选 */
function handleClick(value) {
  selectedStatus.value = value
  queryParams.value.transactionStatus = value
  getList()
}

/** 按钮状态控制逻辑 */
function getButtonStatus(billType, transactionStatus) {
  transactionStatus = parseInt(transactionStatus, 10)
  const status = {
    payBtnEnabled: false,
    cancelBtnEnabled: false,
    viewBtnEnabled: true
  }

  // 月度账单规则
  if (billType === '月度账单') {
    switch (transactionStatus) {
      case 0:  // 待支付
        status.payBtnEnabled = true
        status.cancelBtnEnabled = true
        break
      case 1:  // 已支付
      case 2:  // 已关闭
        break
    }
  }
  // 费用账单规则
  else if (billType === '费用账单') {
    switch (transactionStatus) {
      case 0:  // 待支付
        status.cancelBtnEnabled = true
        break
      case 1:  // 已支付
      case 2:  // 已关闭
        break
    }
  }
  return status
}

/** 取消账单操作 */
function handleCancel(row) {
  title.value = "填写取消原因"
  openView.value = true
  form.value = {
    id: row.id,
    transactionStatus: 2,  // 已关闭状态
    cancelReason: null
  }
}

/** 支付操作（先检查余额，余额充足才打开支付弹窗） */
function handlePay(row) {
  // 获取老人ID和应付金额
  const elderlyId = row.elderlyId;
  const payableAmount = Number(row.payableAmount) || 0;
  
  if (elderlyId) {
    // 先查询老人预交款余额
    getBalanceByElderlyId(elderlyId).then(balanceResponse => {
      console.log(balanceResponse);
      const balanceAmount = Number(balanceResponse.data?.prepaymentBalance) || 0;
      console.log('老人预交款余额:', balanceAmount, '应付金额:', payableAmount);
      
      // 判断余额是否充足
      if (balanceAmount < payableAmount) {
        // 余额不足，不打开支付弹窗，只显示提示
        ElMessage.warning(`余额不足，请充值！当前余额：${balanceAmount.toFixed(2)}元，应付金额：${payableAmount.toFixed(2)}元`);
      } else {
        // 余额充足，打开支付弹窗并显示余额信息
        title.value = "上传支付凭证"
        openView.value = true
        form.value = {
          id: row.id,
          transactionStatus: 1,  // 已支付状态
          paymentMethod: null,
          paymentVoucher: null,
          paymentRemark: null
        }
        imageUrl.value = ''  // 清空上次上传的图片
        elderlyDepositBalance.value = balanceAmount.toFixed(2); // 设置余额显示
        
        ElMessage.info(`该老人当前预交款余额为：${balanceAmount.toFixed(2)}元`);
      }
    }).catch(error => {
      console.error('查询预交款余额失败:', error);
      ElMessage.warning('查询预交款余额失败，请稍后重试');
    });
  } else {
    ElMessage.warning('未找到老人信息，无法进行支付操作');
  }
}

/** 查看账单详情 */
function handleView(row) {
  // getAccountEntryList(row.id).then(response => {
  //   const data = response.data
  //   title.value = "查看账单详情"
  //   openView.value = true
  //   form.value = {
  //     id: data.id,
  //     transactionStatus: data.transactionStatus,
  //     cancelReason: data.cancelReason,
  //     paymentMethod: data.paymentMethod,
  //     paymentVoucher: data.paymentVoucher,
  //     paymentRemark: data.paymentRemark
  //   }
  //   // 查看时回显图片（拼接完整路径）
  //   imageUrl.value = data.paymentVoucher 
  //     ? import.meta.env.VITE_APP_BASE_API + data.paymentVoucher 
  //     : ''
  // })
  router.push({
    path: "/financialManagement/billingManagement/billDetails",
    query: {
      id: row.id
    }
  })
}

/** 提交表单（取消/支付） */
function submitForm() {
  proxy.$refs.accountEntryListRef.validate(valid => {
    if (valid) {
      // 判断是支付操作还是取消操作
      if (title.value === "上传支付凭证") {
        // 支付操作：先更新预存款余额
        const currentRow = accountEntryListList.value.find(item => item.id === form.value.id);
        const elderlyId = currentRow?.elderlyId;
        const payableAmount = Number(currentRow?.payableAmount) || 0;
        const currentBalance = Number(elderlyDepositBalance.value) || 0;
        const newBalance = currentBalance - payableAmount;
        
        console.log('更新预交款余额:', '老人ID:', elderlyId, '新余额:', newBalance);
        
        // 调用updateBalancefindByElderlyId方法更新余额
        updateBalancefindByElderlyId({
          elderlyId: elderlyId,
          prepaymentBalance: newBalance
        }).then(updateResponse => {
          console.log('余额更新成功:', updateResponse);
          
          // 余额更新成功后，执行原有支付逻辑
          updateAccountEntryList(form.value).then(() => {
            proxy.$modal.msgSuccess("支付成功")
            openView.value = false
            reset()
            getList()  // 刷新列表
          }).catch(error => {
            proxy.$modal.msgError(error.msg || "支付操作失败")
          })
        }).catch(updateError => {
          console.error('余额更新失败:', updateError);
          proxy.$modal.msgError('预交款余额更新失败，请稍后重试');
        });
      } else {
        // 取消操作：直接执行原有逻辑
        updateAccountEntryList(form.value).then(() => {
          proxy.$modal.msgSuccess("取消成功")
          openView.value = false
          reset()
          getList()  // 刷新列表
        }).catch(error => {
          proxy.$modal.msgError(error.msg || "操作失败")
        })
      }
    }
  })
}

/** 关闭弹窗 */
function cancel() {
  openView.value = false
  reset()
}

/** 上传成功回调（处理图片预览路径） */
function handleAvatarSuccess(response) {
 if (response.code === 200) {
    console.log(response);
    imageUrl.value = response.url;
    form.value.paymentVoucher = response.url; // 后端存储用相对路径
    ElMessage.success("图片上传成功");
    console.log("上传成功路径:", response.url);
    
  } else {
    ElMessage.error(`上传失败：${response.msg}`);
  }
}

/** 上传前校验 */
function beforeAvatarUpload(rawFile) {
  const isImage = ['image/jpeg', 'image/png'].includes(rawFile.type)
  const isLt2M = rawFile.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error("请上传JPG或PNG格式的图片！")
    return false
  }
  if (!isLt2M) {
    ElMessage.error("图片大小不能超过2MB！")
    return false
  }
  return true
}

/** 移除已上传图片 */
function handleRemove() {
  imageUrl.value = ''
  form.value.paymentVoucher = ''
  ElMessage.info("已移除图片")
}
/** 打开生成月度账单弹窗 */
function generateBill() {
  title.value = "生成月度账单"
  openGenerateBill.value = true
  // 获取老人列表
  getElderlyList()
}
const currentDate = ref(null)
/** 获取入住老人列表 */
function getElderlyList() {
  // 获取当前时间
  const now = new Date()
  // 格式化年月日为yyyy-MM-dd
  const year = now.getFullYear()
  const month = now.getMonth() + 1
  const day = now.getDate()
  const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`
  currentDate.value = formattedDate
  // 这里应该调用后端API获取老人列表
  listRuzhu(currentDate.value).then(response => {
    if (response.code === 200) {
      elderlyList.value = response.data
      console.log(response.rows);
      elderlyList.value = response.rows
    } else {
      ElMessage.error(response.msg || "获取入住老人列表失败")
    }
  })
  // 暂时模拟数据
  // elderlyList.value = [
  //   { id: 1, name: '张三' },
  //   { id: 2, name: '李四' },
  //   { id: 3, name: '王五' }
  // ]
}

/** 日期选择限制 - 只能选择未来月份（不包括当前月） */
function disabledDate(date) {
  const now = new Date()
  // 获取下个月的第一天
  const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1)
  // 禁止选择下个月之前的所有日期（包括当前月）
  return date < nextMonth
}

/** 提交生成月度账单 */
function submitGenerateBill() {
  // 生成账单编号
  generateBillForm.value.billNo = numberGeneration("BL")

  proxy.$refs.generateBillFormRef.validate(valid => {
    if (valid) {
      // 规范化账单月份格式为YYYY-MM
      const selectedDate = new Date(generateBillForm.value.billMonth);
      const normalizedBillMonth = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, '0')}`;
      
      // 获取选中的老人信息
      const selectedElderly = elderlyList.value.find(item => item.id === generateBillForm.value.elderlyId);
      const elderlyName = selectedElderly ? selectedElderly.name : '';
      const elderlyIdNumber = selectedElderly ? selectedElderly.idNumber : '';
      
      // 直接查询相关账单数据进行比较，不依赖getList()
      const queryParams = {
        pageNum: 1,
        pageSize: 1000, // 设置较大的值以获取所有相关账单
        elderlyId: generateBillForm.value.elderlyId,
        billMonth: normalizedBillMonth
      };
      
      listAccountEntryList(queryParams).then(response => {
          const allBills = response && response.rows ? response.rows : [];
          
          // 检查是否存在重复记录：同一老人、同一身份证号、同一月份
          const hasDuplicate = allBills.some(bill => {
            const isSameElderly = bill.elderlyId === generateBillForm.value.elderlyId;
            const isSameMonth = bill.billMonth === normalizedBillMonth;
            const isSameIdNumber = elderlyIdNumber ? bill.idNumber === elderlyIdNumber : true;
            const isNotClosed = bill.transactionStatus !== 2; // 排除已关闭的账单
            
            return isSameElderly && isSameMonth && isSameIdNumber && isNotClosed;
          });
          
          if (hasDuplicate) {
            ElMessage.warning(`${elderlyName}老人在${normalizedBillMonth}月份已存在账单，不可重复添加！`);
            return;
          }
          
          // 没有重复账单，调用addMonthBill生成账单
          // 不修改原始的billMonth格式，保持向后端提交的数据格式不变
          // 创建临时的billData，包含规范化的月份用于检查
          const tempBillData = {
            ...generateBillForm.value,
            billMonth: normalizedBillMonth // 仅用于记录
          };
          
          // 直接调用addMonthBill，使用原始格式提交
          addMonthBill();
            
       }).catch(() => {
         ElMessage.error("查询账单数据失败，请重试");
       });
    }
  });
}

/** 重置生成账单表单 */
function resetGenerateBillForm() {
  generateBillForm.value = {
    elderlyId: null,
    billMonth: ''
  }
  if (proxy.$refs.generateBillFormRef) {
    proxy.resetForm("generateBillFormRef")
  }
}

/** 处理取消生成账单操作 */
function handleCancelGenerateBill() {
  // 关闭弹窗
  openGenerateBill.value = false
  // 清空表单数据
  resetGenerateBillForm()
}

// 初始化加载列表
getList()
</script>

<style scoped>
/* 状态筛选按钮样式 */
.status-buttons {
  display: flex;
  gap: 12px;
  padding: 5px 10px;
  background-color: #F2F2F2;
  margin: 10px 0;
  border-radius: 4px;
  width: fit-content;
}

.status-btn {
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: all 0.2s;
}

.status-btn.active {
  background: #fff;
  color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
}

.status-btn:not(.active):hover {
  background: #e8e8e8;
}

/* 生成月度账单按钮样式 */
.flex-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.generate-btn{
  margin-right: 40px;
}

/* 上传图片样式 */
.avatar-uploader {
  margin-top: 10px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
}

/* 弹窗按钮区域 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
</style>

<style>
/* 上传组件默认样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.avatar-uploader .el-upload:hover {
  border-color: #1890ff;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  line-height: 178px;
}
</style>